<template>
  <view class="fm-fetch-card">
    <view class="fm-fetch-card__hd">{{ type === 'fetch' ? '取餐码' : '收货信息' }}</view>
    <view class="fm-fetch-card__bd" v-if="type === 'fetch'">
      <!-- <fm-image size="38vw" :src="fetch.fetchCodeImage" inline></fm-image> -->
      <view class="fm-fetch-code">{{ fetch.fetchCode }}</view>
      <view class="fm-fetch-desc">您前面有 {{ fetch.before }} 人等待，取餐号当日有效</view>
      <view class="fm-fetch-desc">叫号时，我们会以服务消息通知您</view>
    </view>

    <view class="fm-fetch-card__bd fm-py-0" v-else>
      <trade-detail-cell label="收货人" :value="`${delivery.userName}, ${delivery.telNumber}`"></trade-detail-cell>
      <trade-detail-cell label="收货地址" :value="delivery.detailInfo"></trade-detail-cell>
      <trade-detail-cell label="预约送出时间" :value="delivery.time"></trade-detail-cell>
    </view>

    <view @click="goRefund" class="fm-fetch-card__ft" hover-class="active">申请退单</view>
  </view>
</template>

<script>
import FmImage from '@/components/FmImage'
import TradeDetailCell from './TradeDetailCell'
export default {
  name: 'TradeFetchCard',
  components: {
    FmImage,
    TradeDetailCell
  },
  model: {
    prop: 'fetch',
    event: 'change'
  },
  props: {
    fetch: Object,
    fetchCode: String,
    fetchCodeImage: String,
    before: [Number, String],
    fetchBranchName: String,
    tradeId: String,
    type: String,
    delivery: Object
  },
  computed: {
    // _fetchCode () {
    //   return this.fetchCode || this.fetch.fetchCode
    // },
    // _fetchCodeImage () {
    //   return this.fetchCodeImage || this.fetch.fetchCodeImage
    // },
    // _before () {
    //   return this.before || this.fetch.before
    // },
    // _fetchBranchName () {
    //   return this.fetchBranchName || this.fetch.fetchBranchName
    // },
    // _tradeId () {
    //   return this.tradeId || this.fetch.tradeId
    // }
  },
  methods: {
    goRefund () {
      const tradeId = this._tradeId
      this.$wxp.navigateTo({
        url: `/pages/refund/main?tradeId=${tradeId}`
      })
    }
  }
}
</script>

<style lang="less">
@import "../../asset/style/_variable.less";

.fm-fetch-card {
  position: relative;
  margin: 8px;
  background-color: @--fill-base;
  border-radius: @--border-radius-small;
  text-align: center;
  padding: 0;
  border: @--border-width-base @--border-style-base @--border-color-extra-light;
  overflow: hidden;
}

.fm-fetch-card__hd {
  position: relative;
  background-color: shade(#ffffff, 2%);
  height: 48px;
  line-height: 48px;
  color: @--color-text-secondary;
  font-size: @--font-size-root;
  font-weight: @--font-weight-blod;

  &::after {
    .setBottomLine(@--border-color-extra-light);
  }
}

.fm-fetch-card__bd {
  padding: 16px;
}

.fm-fetch-card__ft {
  position: relative;
  height: 48px;
  color: @--link-color;
  font-size: @--font-size-base;
  line-height: 48px;
  letter-spacing: .5px;
  font-weight: @--font-weight-blod;
  text-align: center;

  &::before {
    .setTopLine(@--border-color-extra-light);
  }

  &::after {
    .setActive();
  }

  &.active {
    &::after {
      opacity: .08;
    }
  }
}

.fm-fetch-code {
  font-family: @--font-family-number;
  font-size: 20vw;
  // font-weight: @--font-weight-blod;
  font-weight: @--font-weight-light;
  color: @--color-danger;
  height: 35vw;
  line-height: 35vw;
  text-align: center;
}

.fm-fetch-desc {
  font-size: @--font-size-small;
  color: @--color-text-placeholder;
  text-align: center;
  line-height: @--font-line-height-primary;
}
</style>
